<template>
  <div class="functionShow c_raletive">
    <Transition name="load" mode="out-in">
        <div class="container c_flex c_justify_between" v-if="pageNum == 1">
        <img src="../../assets/images/makeFriend.png" alt="" />
        <div class="text">
          <div class="title1">首页交友,个播,派对</div>
          <div class="title2">多元化类别,一目了然</div>
          <div class="right c_flex c_justify_start">
              <div @click="preiousPage">上一页</div>
              <div @click="backPage">下一页</div>
          </div>
        </div>
      </div>
    </Transition>
    <Transition name="load" mode="out-in">
        <div class="container  c_flex c_justify_between" v-if="pageNum == 2">
        <img src="../../assets/images/circle.png" alt="" />
        <div class="text">
          <div class="title1">圈子动态</div>
          <div class="title2">随时随地分享你的心情</div>
          <div class="right c_flex c_justify_start">
              <div @click="preiousPage">上一页</div>
              <div @click="backPage">下一页</div>
          </div>
        </div>
      </div>
    </Transition>
    <Transition name="load" mode="out-in">
        <div class="container c_flex c_justify_between" v-if="pageNum == 3">
        <img src="../../assets/images/message.png" alt="" />
        <div class="text">
          <div class="title1">多样消息</div>
          <div class="title2">和喜欢的人一起聊天吧</div>
          <div class="right c_flex c_justify_start">
              <div @click="preiousPage">上一页</div>
              <div @click="backPage">下一页</div>
          </div>
        </div>
      </div>
    </Transition>
    <Transition name="load" mode="out-in">
        <div class="container c_flex c_justify_between" v-if="pageNum == 4">
        <img src="../../assets/images/makefriend1.png" alt="" />
        <div class="text">
          <div class="title1">进房连麦</div>
          <div class="title2">一起愉快的交友聊天吧</div>
          <div class="right c_flex c_justify_start">
              <div @click="preiousPage">上一页</div>
              <div @click="backPage">下一页</div>
          </div>
        </div>
      </div>
    </Transition>
    
  </div>
</template>
  
  <script>
export default {
  name: "functionShow",
  data() {
    return {
      pageNum: 1,
    };
  },
  methods: {
    preiousPage() {
      if (this.pageNum == 1) {
        this.pageNum = 4;
      } else {
        this.pageNum--;
      }
    },
    backPage() {
      if (this.pageNum == 4) {
        this.pageNum = 1;
      } else {
        this.pageNum++;
      }
    },
  },
};
</script>
  
  <style lang="scss">
.functionShow {
  // background: skyblue;
    width: 40vw;
    .container {
      // background: #fff;
      img {
        width: auto;
        height: 80vh;
        border-radius: 20rem;
      }
      .text {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        margin-top: 200rem;
        .title1 {
          font-size: 40rem;
          font-family: "华文彩云";
          color: #fff;
        }
        .title2 {
          font-size: 30rem;
          font-family: "华文琥珀";
          color: #fff;
          line-height: 60rem;
        }
      }
    }
    .right {
      position: absolute;
      bottom: 300rem;
      right: 156rem;
      div {
        height: 48rem;
        line-height: 48rem;
        padding: 0 14rem;
        border-radius: 9rem;
        color: #fff;
        font-family: "华文琥珀";
        margin-right: 10rem;
        font-size: 20rem;
        /* transform: scale(0.8); */
      }
      div:hover {
        font-size: 24rem;
        font-family: "华文彩云";
        background: #16825d;
        cursor: pointer;
        transition: all 0.5s;
      }
    }
  
}
.load-enter-active,
.load-leave-active {
  transition: all 0.3s;
}
.load-enter,
.load-leave-to {
  opacity: 0;
  transform: translateY(-800rem);
}
</style>